import * as YvanUI from 'yvan-ui-wotu'
import * as CustomService from '@server/example/CustomService'

interface Ref {
    t1: YvanUI.Text,
    t2: YvanUI.Text
}

const React = YvanUI.React
const _ = YvanUI.lodash

export default class GridBasic extends YvanUI.Scope<void, Ref> {

    query = this.$$({
        f1: '',
        f2: ''
    })

    onRender() {
        window['biz'] = this
    }

    vjson = {
        view: 'page',
        title: 'agGrid表格',
        // title: <div><span style={{color: 'RED'}}>{this.className}</span></div>,
        subTitle: '',
        ref: 'pageGrid',
        items: [
            // {
            //     view: 'grid',
            //     title: 'GridTest',
            //     ctlName: 'grid1',
            //     // width: '300px',
            //     // height: '600px',
            //     showRowNumber: true,
            //     pagination: true,
            //     pageSize: 50,
            //     columns: [
            //         {
            //             "field": "ROLE_NAME",
            //             "title": "角色名称"
            //         },
            //         {
            //             "field": "ROLE_TITLE",
            //             "title": "角色描述",
            //             "width": 400
            //         },
            //         {
            //             "field": "STATUS",
            //             "title": "状态w",
            //             "editMode": "checkbox",
            //         },
            //         {
            //             "field": "CREATETIME",
            //             "title": "创建时间",
            //             "formatter": "fmtDate"
            //         }
            //     ],
            //     api: 'gridLoad'
            //
            // },
            {
                view: 'grid',
                title: 'GridTest',
                ctlName: 'grid2',
                // width: '300px',
                // height: '600px',
                showRowNumber: true,
                pagination: true,
                pageSize: 20,
                columns: [
                    {"field": "customer_id", "title": '客户ID'},
                    {"field": "customer_code", "title": '客户编号', hidden: true},
                    {"field": "customer_name", "title": '客户名称'},
                    {"field": "logogram", "title": '助记码'},
                    {"field": "industry_class", "title": '客户类型'},
                    {"field": "customer_type", "title": '客户类别'},
                    {"field": "accounts", "title": '结算方'},
                    {"field": "shipper", "title": '承运方'},
                    {"field": "zip", "title": '邮编'},
                    {"field": "contact", "title": '联系人'},
                    {"field": "telephone", "title": '电话'},
                    {"field": "is_enable", "title": '是否启用'},
                    {"field": "remark", "title": '备注'},
                    {"field": "create_by", "title": '创建者'},
                    {"field": "create_at", "title": '建立时间'},
                    {"field": "update_by", "title": '修改者'},
                    {"field": "update_at", "title": '更新时间'}
                ],
                dataSource: {
                    func: CustomService.selectAll,
                    params: {
                        field1: () => 'aaa' + this.query.f1,
                        field2: () => 'bbb' + this.query.f2
                    }
                }
            }
        ]
    }
}

const data = [
    {ROLE_NAME: 'ee1', ROLE_TITLE: 'rrr', STATUS: 'ddr', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee2', ROLE_TITLE: 'rr1', STATUS: 'dd1', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee3', ROLE_TITLE: 'rr2', STATUS: 'dd2', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee4', ROLE_TITLE: 'rr3', STATUS: 'dd3', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee5', ROLE_TITLE: 'rr4', STATUS: 'dd4', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee6', ROLE_TITLE: 'rr', STATUS: 'dd', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee7', ROLE_TITLE: 'rr1', STATUS: 'dd1', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee8', ROLE_TITLE: 'rr2', STATUS: 'dd2', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee9', ROLE_TITLE: 'rr3', STATUS: 'dd3', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee10', ROLE_TITLE: 'rr4', STATUS: 'dd4', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee11', ROLE_TITLE: 'rr', STATUS: 'dd', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee12', ROLE_TITLE: 'rr1', STATUS: 'dd1', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee13', ROLE_TITLE: 'rr2', STATUS: 'dd2', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee14', ROLE_TITLE: 'rr3', STATUS: 'dd3', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee15', ROLE_TITLE: 'rr4', STATUS: 'dd4', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee16', ROLE_TITLE: 'rr', STATUS: 'dd', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee17', ROLE_TITLE: 'rr1', STATUS: 'dd1', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee18', ROLE_TITLE: 'rr2', STATUS: 'dd2', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee19', ROLE_TITLE: 'rr3', STATUS: 'dd3', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee20', ROLE_TITLE: 'rr4', STATUS: 'dd4', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee21', ROLE_TITLE: 'rrr', STATUS: 'ddr', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee22', ROLE_TITLE: 'rr1', STATUS: 'dd1', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee23', ROLE_TITLE: 'rr2', STATUS: 'dd2', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee24', ROLE_TITLE: 'rr3', STATUS: 'dd3', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee25', ROLE_TITLE: 'rr4', STATUS: 'dd4', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee26', ROLE_TITLE: 'rr', STATUS: 'dd', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee27', ROLE_TITLE: 'rr1', STATUS: 'dd1', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee28', ROLE_TITLE: 'rr2', STATUS: 'dd2', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee29', ROLE_TITLE: 'rr3', STATUS: 'dd3', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee30', ROLE_TITLE: 'rr4', STATUS: 'dd4', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee31', ROLE_TITLE: 'rr', STATUS: 'dd', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee32', ROLE_TITLE: 'rr1', STATUS: 'dd1', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee33', ROLE_TITLE: 'rr2', STATUS: 'dd2', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee34', ROLE_TITLE: 'rr3', STATUS: 'dd3', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee35', ROLE_TITLE: 'rr4', STATUS: 'dd4', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee36', ROLE_TITLE: 'rr', STATUS: 'dd', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee37', ROLE_TITLE: 'rr1', STATUS: 'dd1', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee38', ROLE_TITLE: 'rr2', STATUS: 'dd2', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee39', ROLE_TITLE: 'rr3', STATUS: 'dd3', CREATETIME: '2020-02-23'},
    {ROLE_NAME: 'ee40', ROLE_TITLE: 'rr4', STATUS: 'dd4', CREATETIME: '2020-02-23'},
]